<template>
  <div>
    <div class="container">
      <div class="section section-menus">
        <div class="welcome-container">
          <div class="welcome">
            <div class="default-avatar">
              <img
                style="object-fit: cover; width: 100%; height: 100%; border-radius: 50%"
                src="~@/assets/images/default-avatar.png"
                alt
              />
            </div>
            <div class="welcome-content">
              <div>{{site_name}}，欢迎您</div>
              <div>
                今日新增订单：
                <span>{{ time_statistic.today_order.order_count }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="menus-container">
          <div class="menus">
            <div class="li" >
              <div class="li-box-shadow" @click="navgationMenu('/onsite/cate_list')">
                <img class="img" src="~@/assets/images/home/item1.png" alt />
                <div class="name">服务分类管理</div>
              </div>
            </div>
            <div class="li">
              <div class="li-box-shadow" @click="navgationMenu('/onsite/service_list')">
                <img class="img" src="~@/assets/images/home/item2.png" alt />
                <div class="name">服务项目管理</div>
              </div>
            </div>
            <div class="li">
              <div class="li-box-shadow" @click="navgationMenu('/onsite/order_list')">
                <img class="img" src="~@/assets/images/home/item3.png" alt />
                <div class="name">服务订单管理</div>
              </div>
            </div>
            <div class="li">
              <div class="li-box-shadow" @click="navgationMenu('/base/staff_list')">
                <img class="img" src="~@/assets/images/home/item4.png" alt />
                <div class="name">服务人员管理</div>
              </div>
            </div>
            <div class="li">
              <div class="li-box-shadow" @click="navgationMenu('/base/company_list')">
                <img class="img" src="~@/assets/images/home/item5.png" alt />
                <div class="name">门店列表信息</div>
              </div>
            </div>
            <div class="li" v-hasPermi="['operation-settion']">
              <div class="li-box-shadow" @click="navgationMenu('/operation/setting')">
                <img class="img" src="~@/assets/images/home/item6.png" alt />
                <div class="name">系统设置</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="section-info-1">
        <div class="left-container">
          <div class="box-1">
            <div class="li">
              <div class="content">
                <div class="header">
                  <div class="title">待处理订单</div>
                  <div class="num">{{ order_statistic.order_20 }}</div>
                </div>
                <div class="li-box">
                  <div class="li-info">
                    <div>{{ order_statistic.order_10 }}</div>
                    <div>待接单</div>
                  </div>
                  <div class="li-info">
                    <div>{{ order_statistic.order_30 }}</div>
                    <div>待结单</div>
                  </div>
                  <div class="li-info">
                    <div>{{ order_statistic.order__10 }}</div>
                    <div>申请退款</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="li">
              <div class="content">
                <div class="header">
                  <div class="title">入驻/投诉</div>
                  <div class="num">{{ extra_statistic.total_apply }}</div>
                </div>
                <div class="li-box">
                  <div class="li-info">
                    <div>{{ extra_statistic.staff_apply }}</div>
                    <div>服务人员申请</div>
                  </div>
                  <div class="li-info">
                    <div>{{ extra_statistic.company_apply }}</div>
                    <div>门店申请</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="li">
              <div class="content">
                <div class="header">
                  <div class="title">其他</div>
                  <div class="num"></div>
                </div>
                <div class="li-box">
                  <div class="li-info">
                    <div>{{ extra_statistic.agent_count }}</div>
                    <div>当前代理</div>
                  </div>
                  <div class="li-info">
                    <div>{{ extra_statistic.company_count }}</div>
                    <div>当前门店</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="box-2">
            <div class="realtime-info-container">
              <div class="realtime-info-header">
                <div class="title">
                  <img src="~@/assets/images/home/realtime-text.png" alt />
                  <span
                    data-time="2023-05-04 12:58:53"
                    class="up-datetime"
                  >更新于{{ time_statistic.now }}</span>
                </div>
              </div>
              <div class="realtime-info-content">
                <div class="info-box">
                  <div class="li">
                    <img style="width: 13px; height: 13px" src="~@/assets/images/home/yuan.png" alt />
                    <span
                      style="font-size: 14px; margin-right: 2px; margin-left: 2px; font-weight:900;text-wrap: nowrap;"
                    >今日新增用户</span>
                  </div>
                  <div class="li num">{{ time_statistic.user_today }}</div>
                  <div class="li" style="font-size: 14px; color: #999">
                    <span style="flex-shrink: 0; font-size:13px">昨日：</span>
                    <span>{{ time_statistic.user_yesterday }}</span>
                    <span
                      class="iconfont-mxx mxx-yly_xiajiang"
                      style="color: #1cc851; font-size: 10px; transform: rotate(180deg)"
                      v-if="time_statistic.sub_user_day > 0"
                    ></span>
                    <span
                      class="iconfont-mxx mxx-yly_xiajiang"
                      style="color: #eb3733; font-size: 10px"
                      v-else
                    ></span>
                    <span>{{ Math.abs(time_statistic.sub_user_day) }}</span>
                  </div>
                </div>
                <div class="info-box">
                  <div class="li">
                    <img
                      style="width: 12px; height: 12px;"
                      src="~@/assets/images/home/yuan.png"
                      alt
                    />
                    <span
                      style="font-size: 14px; margin-right: 2px; margin-left: 2px; font-weight:900;text-wrap: nowrap;"
                    >本月新增用户</span>

                  </div>
                  <div class="li num">{{ time_statistic.user_month }}</div>
                  <div class="li" style="font-size: 14px; color: #999">
                    <span style="flex-shrink: 0; font-size:13px">上月：</span>
                    <span>{{ time_statistic.user_last_month }}</span>
                    <span
                      class="iconfont-mxx mxx-yly_xiajiang"
                      style="color: #1cc851; font-size: 10px; transform: rotate(180deg)"
                      v-if="time_statistic.sub_user_month > 0"
                    ></span>
                    <span
                      class="iconfont-mxx mxx-yly_xiajiang"
                      style="color: #eb3733; font-size: 10px"
                      v-else
                    ></span>
                    <span>{{ Math.abs(time_statistic.sub_user_month) }}</span>
                  </div>
                </div>
                <div class="info-box">
                  <div class="li">
                    <img style="width: 12px; height: 12px" src="~@/assets/images/home/yuan.png" alt />
                    <span
                      style="font-size: 14px; margin-right: 2px; margin-left: 2px; font-weight:900;text-wrap: nowrap;"
                    >今日订单收入</span>
                  </div>
                  <div class="li num">{{ time_statistic.today_order.pay_price }}</div>
                  <div class="li" style="font-size: 14px; color: #999">
                    <span style="flex-shrink: 0; font-size:13px">昨日：</span>
                    <span>{{ time_statistic.yesterday_order.pay_price }}</span>
                    <span
                      class="iconfont-mxx mxx-yly_xiajiang"
                      style="color: #1cc851; font-size: 10px; transform: rotate(180deg)"
                      v-if="time_statistic.sub_order_day_price > 0"
                    ></span>
                    <span
                      class="iconfont-mxx mxx-yly_xiajiang"
                      style="color: #eb3733; font-size: 10px"
                      v-else
                    ></span>
                    <span>{{ Math.abs(time_statistic.sub_order_day_price) }}</span>
                  </div>
                </div>
                <div class="info-box">
                  <div class="li">
                    <img style="width: 12px; height: 12px" src="~@/assets/images/home/yuan.png" alt />
                    <span
                      style="font-size: 14px; margin-right: 2px; margin-left: 2px; font-weight:900;text-wrap: nowrap;"
                    >本月订单收入</span>
                  </div>
                  <div class="li num">{{ time_statistic.now_month_order.pay_price }}</div>
                  <div class="li" style="font-size: 14px; color: #999">
                    <span style="flex-shrink: 0; font-size:13px">上月：</span>
                    <span>{{ time_statistic.last_month_order.pay_price }}</span>
                    <span
                      class="iconfont-mxx mxx-yly_xiajiang"
                      style="color: #1cc851; font-size: 10px; transform: rotate(180deg)"
                      v-if="time_statistic.sub_order_month_price > 0"
                    ></span>
                    <span
                      class="iconfont-mxx mxx-yly_xiajiang"
                      style="color: #eb3733; font-size: 10px"
                      v-else
                    ></span>
                    <span>{{ Math.abs(time_statistic.sub_order_month_price) }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="right-container">
          <div class="service-rank">
            <div class="rank-header">
              <div class="title">
                <img src="~@/assets/images/home/rank-title.png" alt />
                <span
                  data-time="2023-05-04 12:58:53"
                  class="up-datetime"
                >更新于{{ time_statistic.now }}</span>
              </div>
              <div class="rank-type">
                <button
                  :class="rank_type == 'month' ? 'select-btn' : ''"
                  @click="rankTypeChange('month')"
                >本月</button>
                <button
                  :class="rank_type == 'lately30' ? 'select-btn' : ''"
                  @click="rankTypeChange('lately30')"
                >近一月</button>
                <button
                  :class="rank_type == 'lately180' ? 'select-btn' : ''"
                  @click="rankTypeChange('lately180')"
                >近半年</button>
                <button
                  :class="rank_type == 'year' ? 'select-btn' : ''"
                  @click="rankTypeChange('year')"
                >全年</button>
              </div>
            </div>
            <div class="rank-main">
              <el-table height="100%" :data="extra_statistic.item_hot">
                <el-table-column label="排名" align="center" min-width="50">
                  <template slot-scope="scope">
                    <div style="display: flex; justify-content: center; align-items: center">
                      <img
                        style="width: 25px"
                        v-if="scope.$index == 0"
                        src="~@/assets/images/home/top1.png"
                        alt
                      />
                      <img
                        style="width: 25px"
                        v-else-if="scope.$index == 1"
                        src="~@/assets/images/home/top2.png"
                        alt
                      />
                      <img
                        style="width: 25px"
                        v-else-if="scope.$index == 2"
                        src="~@/assets/images/home/top3.png"
                        alt
                      />
                      <strong v-else>{{ scope.$index + 1 }}</strong>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="服务名称">
                  <template slot-scope="scope">{{scope.row.title}}</template>
                </el-table-column>
                <el-table-column label="价格">
                  <template slot-scope="scope">￥{{scope.row.price}}</template>
                </el-table-column>
                <el-table-column label="类型">
                  <template slot-scope="scope">{{scope.row.cateTitle}}</template>
                </el-table-column>
                <el-table-column label="下单量">
                  <template slot-scope="scope">{{scope.row.orderCount}}</template>
                </el-table-column>
                <el-table-column label="总金额">
                  <template slot-scope="scope">{{scope.row.payPrice}}</template>
                </el-table-column>
              </el-table>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--订单统计-->
    <service-chart ref="serviceChart" :now="time_statistic.now" />
  </div>
</template>
  
    <script>
import serviceChart from './components/serviceChart';
// import { auth } from '@/api/system';
// import { checkAuth } from '@/api/common';

import { timeStatisticApi, extraStatisticApi, orderStatisticApi,getSiteName } from '@/api/home.js';
import { checkAuth} from '@/api/onsite.js'
export default {
  name: 'index',
  components: {
    serviceChart,
  },
  data() {
    return {
      openImage: false,
      visitType: 'day', // day, month, year
      visitDate: [new Date(), new Date()],
      force_reminder: null,
      site_name: '',
      time_statistic: {
        today_order: { order_count: 0 },
        yesterday_order: { order_count: 0 },
        now_month_order: { order_count: 0 },
        last_month_order: { order_count: 0 ,pay_price:0},
      },
      extra_statistic: {},
      order_statistic: {},
      columns: [
        {
          title: '排名',
          slot: 'id',
          align: 'center',
          minWidth: 30,
        },
        {
          title: '服务名称',
          key: 'title',
          minWidth: 110,
        },
        {
          title: '价格',
          key: 'price',
          minWidth: 50,
        },
        {
          title: '分类',
          key: 'cate_title',
          minWidth: 50,
        },
        {
          title: '类型',
          slot: 'type',
          minWidth: 50,
        },
        {
          title: '下单数量',
          key: 'order_count',
          minWidth: 50,
        },
        {
          title: '总金额',
          key: 'pay_price',
          minWidth: 50,
        },
      ],
      rankData: [
        {
          id: 1,
        },
        {
          id: 2,
        },
        {
          id: 3,
        },
        {
          id: 4,
        },
        {
          id: 5,
        },
        {
          id: 6,
        },
      ],
      rank_type: 'month',
    };
  },
  mounted() {
    // this.getAuth();
    this.getSite();
    // //获取实时数据
    this.getOntime();
    // //获取额外数据
    this.getExtra();
    // //获取订单数据
    this.getOrderStatistic();
    this.checkAuth();
  },
  methods: {
    checkAuth() {
      // let time = sessionStorage.getItem('checkAuth')
      // if(time > Date.now())return
      // let expires = Date.now() + 3*3600*1000
      checkAuth().then((res) => {
        // sessionStorage.setItem('checkAuth',expires)
        let data = res;
        if (data.code == -1) {
          this.$message.error(data.msg, 5000);
        }
      });
    },
    getOntime() {
      timeStatisticApi().then((res) => {
        let data = res;
        this.time_statistic = data;
        console.log( this.time_statistic,'time_statistic')

      });
    },
    getExtra() {
      let data = {
        time: this.rank_type,
      };
      extraStatisticApi(data).then((res) => {
        let data = res;
        this.extra_statistic = data;
      });
    },
    getOrderStatistic() {
      orderStatisticApi().then((res) => {
        let data = res;
        this.order_statistic = data;
      });
    },
    getSite() {
      getSiteName().then((res) => {
        console.log(res);
        this.site_name = res;
      });
    },
    getAuth() {
      auth()
        .then((res) => {
          let data = res.data || {};
          this.force_reminder = data.force_reminder;
          if (data.auth_code && data.auth) {
            this.authCode = data.auth_code;
            this.auth = true;
          }
          this.openImage = true;
        })
        .catch((res) => {});
    },
    clear() {
      this.openImage = false;
    },
    // 服务项目排行
    rankTypeChange(val) {
      this.rank_type = val;
      this.getExtra();
    },
    navgationMenu(val) {
      this.$router.push(val);
    },
  },
};
</script>
    <style scoped lang="stylus">
    >>> .layout-container .layout-main {
      background-color: #f5f8fb;
    }

    /* table css */
    >>> .el-table-wrapper {
      height: 100%;
    }

    >>> .el-table-header thead tr th {
      padding: 0px;
      font-size: 12px;
    }

    >>> .el-table-header .el-table-cell {
      font-size: 12px;
      color: #999999;
      font-weight: bold;
      text-align: left;
    }

    >>> .el-table {
      background: transparent !important;
    }

    >>> .el-table th {
      background: transparent !important;
    }

    >>> .el-table td {
      background: transparent !important;
    }

    /* tabel css */
</style>
    <style lang="scss" scoped>
@import url('~@/assets/iconfont-mxx/iconfont.css');
.container {
  width: 100%;
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  margin-bottom: 15px;
  .section-menus {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    column-gap: 15px;
    .welcome-container {
      border-radius: 8px;
      padding: 2px;
      background: #ffffff;
      display: flex;
      align-items: stretch;
      .welcome {
        width: 100%;
        height: 100%;
        padding: 25px;
        padding-right: 50px;
        background: linear-gradient(162deg, rgb(236, 244, 254), #fff 53%);
        border-radius: 8px;
        display: flex;
        align-items: center;
        column-gap: 12px;
        .default-avatar {
          width: 60px;
          height: 60px;
          background: #fff;
          border-radius: 50%;
          padding: 2px;
          box-shadow: 0 0 11px 0px rgb(219, 222, 227, 40%);
        }
        .welcome-content div:first-child {
          font-size: 14px;
          font-weight: bold;
          margin-bottom: 10px;
        }
        .welcome-content div:last-child {
          font-size: 12px;
          color: #999;
        }
        .welcome-content div span {
          color: #428bf4;
          font-weight: bold;
        }
      }
    }
    .menus-container {
      flex: 1;
      border-radius: 8px;
      padding: 2px;
      background: #ffffff;
      .menus {
        width: 100%;
        height: 100%;
        background: linear-gradient(162deg, #ecf4fe, #fff 20%);
        border-radius: 8px;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        .li {
          width: 100%;
          height: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          .li-box-shadow {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            row-gap: 10px;
            user-select: none;
            .img {
              width: 42px;
              height: 42px;
              transition: all 0.5s;
            }
          }
          .li-box-shadow:hover .img {
            width: 70px;
            height: 70px;
            transition: all 0.5s;
          }
          .name {
            font-size: 14px;
          }
        }
        .li .img {
          width: 42px;
          height: 42px;
          transition: all 0.5s;
        }
      }
    }
  }
  .section-info-1 {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(40%, 50%) minmax(40%, 50%);
    column-gap: 15px;
    .left-container {
      display: flex;
      flex-direction: column;
      .box-1 {
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-row-gap: 15px;
        .li {
          display: inline-block;
          border-radius: 8px;
          padding: 2px;
          background-color: #fff;
          &:nth-child(1) {
            grid-column: 1 / span2;
          }
          &:nth-child(2) {
            margin-right: 15px;
          }
          &:first-child {
            .li-box {
              display: flex;
              .li-info {
                flex: 1;
                flex-shrink: 0;
                text-wrap: nowrap;
              }
            }
          }
          &:last-child {
            margin-right: 0px;
          }
          .content {
            border-radius: 8px;
            .header {
              display: flex;
              justify-content: space-between;
              align-items: center;
              background: #e1ebff;
              border-radius: 8px 8px 0 0;
              padding: 10px;
              .title {
                font-size: 14px;
                color: #333;
              }
              .num {
                color: #428bf4;
                font-size: 20px;
                height: 20px;
              }
            }
            .li-box {
              padding: 10px 0px;
              display: flex;
              .li-info {
                flex: 1;
                padding: 0px 20px;
                display: inline-block;
                flex-shrink: 0;
                -webkit-flex-shrink: 0;
                div {
                  &:first-child {
                    color: #333;
                    font-weight: bold;
                    font-size: 16px;
                    text-align: center;
                  }
                  &:last-child {
                    color: #999;
                    font-size: 12px;
                    text-align: center;
                  }
                }
              }
            }
          }
        }
      }
      .box-2 {
        flex: 1;
        width: 100%;
        border-radius: 8px;
        padding: 2px;
        background-color: #fff;
        margin-top: 15px;
        .realtime-info-container {
          width: 100%;
          background: linear-gradient(162deg, #ecf4fe, #fff 20%);
          border-radius: 8px;
          padding-bottom: 15px;
          height: 100%;
          .realtime-info-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px;
            .title {
              display: flex;
              align-items: flex-end;
              img {
                height: 16px;
                object-fit: contain;
              }
            }
            .up-datetime {
              font-size: 12px;
              color: #999;
              padding-left: 4px;
              transform: translateY(4px);
            }
          }
          .realtime-info-content {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 15px;
            padding: 0px 15px;
            .info-box {
              flex: 1 0 calc(25% - 18px);
              border-radius: 8px;
              background: linear-gradient(162deg, #ecf4fe, #fdfeff);
              display: flex;
              flex-direction: column;
              row-gap: 15px;
              padding: 10px;
              &:hover {
                outline: 1px solid #428bf4;
              }
              .li {
                display: flex;
                align-items: center;
              }
              .num {
                color: #428bf4;
                font-weight: bold;
                font-size: 20px;
              }
            }
          }
        }
      }
    }
    .right-container {
      flex: 1;
      width: 100%;
      position: relative;
      background: #ffffff;
      padding: 2px;
      border-radius: 8px;
      height: 100%;
      .service-rank {
        width: 100%;
        background: linear-gradient(162deg, #ecf4fe, #fff 20%);
        border-radius: 8px;
        height: 100%;
        display: flex;
        flex-direction: column;

        .rank-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 15px;

          .title {
            display: flex;
            align-items: flex-end;
            column-gap: 4px;
            flex-wrap: wrap;
            img {
              height: 16px;
              object-fit: contain;
            }
            .up-datetime {
              font-size: 12px;
              color: #999;
              flex-shrink: 0;
              transform: translateY(4px);
            }
          }
          .rank-type {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            flex-shrink: 0;
            button {
              background: #fff;
              border: 1px solid #dcdcdc;
              color: #999;
              font-size: 10px;
              border-radius: 4px;
              cursor: pointer;
              height: 18px;
              font-size: 10px;
              line-height: 18px;
              padding: 0;
              min-width: 60px;
              text-align: center;
            }
            button:hover {
              border: 1px solid #428bf4;
              color: #428bf4;
            }
            .select-btn {
              border: 1px solid #428bf4;
              color: #428bf4;
            }
          }
        }

        .rank-main {
          padding-left: 6px;
          flex: 1;
        }
      }
    }
  }
  @media screen and (max-width: 768px) {
    .section-info-1 {
      display: flex;
      flex-direction: column;
    }
  }
  @media screen and (max-width: 1024px) {
    .section-menus {
      display: grid;
      grid-template-columns: 1fr;
      grid-row-gap: 15px;
      .menus-container {
        padding: 15px 0px;
      }
    }
  }
}
</style>
  